<template>
    <div class="layout">
        <div class="container">
            <div class="guide-con" v-if="state.showGuide">
                <div class="guide-t">
                    <img src="//s.weituibao.com/1582958061265/mlogo.png" alt="logo">
                    <span>管理系统</span>
                </div>
                <Guide />
            </div>
            <div class="content-con">
                <RouterView class="routerview" />
                <Footer v-if="state.showGuide" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive } from 'vue'
    import Guide from './components/Guide.vue'
    import Footer from './components/Footer.vue'
    import { useRouter } from 'vue-router'

    let state = reactive({
        showGuide: true
    });

    // const router = useRouter()
    // // 前置路由守卫
    // router.beforeEach((to, from, next) => {
    //     if (to.path === '/login') {
    //         next()
    //     } else {
    //         if (!localGet('token')) {
    //             next({
    //                 path: '/login'
    //             })
    //         } else {
    //             next();
    //         }
    //     }
    // })
    // // 后置路由守卫
    // router.afterEach((to, from) => {
    //     if (to.path === '/login') {
    //         state.showGuide = false
    //     } else {
    //         state.showGuide = true
    //     }
    // })
</script>

<style scoped>
    .container {
        height: 100vh;
        display: flex;
    }

    .guide-con {
        width: 200px;
        height: 100%;
        background: #222832;
        /* background: skyblue; */
    }

    .routerview {
        height: calc(100% - 50px);
    }

    .content-con {
        flex: 1;
        position: relative;
    }

    .guide-t {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        border-bottom: 2px solid rgba(0, 0, 0, .2);
        box-sizing: border-box;

        img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }

        span {
            font-size: 20px;
            color: #ffffff;
        }
    }
</style>